<script setup >
import { onLoad,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { ref } from 'vue'

const isAgreePrivacy=ref(false)

//手机号快捷登录
const handleFastLogin=()=>{
	uni.showToast({
		title:'功能暂未实现',
		icon:'error'
	})
}

//正常登录
const handleLogin=()=>{
	//跳转登录界面
	uni.navigateTo({
		url:'/pages/login/login'
	})
}


//分享给朋友
onShareAppMessage((e)=>{
		
	return {
		title:"智途安行",
		path:"/pages/index/index"
	}
})
//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"666",
		imageUrl:"/static/logo.png"
	}
})

</script>

<template>
  <view class="viewport">
    <view class="logo">
      <image
        src="../../static/logo.png"
      ></image>
    </view>
	<view class="desc">
		时刻守护您的道路安全
	</view>
    <view class="login">
      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="button-privacy-wrap">
        <button
          :hidden="isAgreePrivacy"
          class="button-opacity button phone"
          @tap="checkedAgreePrivacy"
        >
          请先阅读并勾选协议
        </button>
        <button class="button phone" @tap="handleFastLogin">
          <text class="icon icon-phone"></text>
          手机号快捷登录
        </button>
      </view>
      <!-- #endif -->
      <view class="extra">
         <button class=" other"  @tap="handleLogin">
           <text class="detail" ></text>
           手机号登录（密码/验证码）
         </button>
      </view>
      <view class="tips">
        <label class="label" @tap="isAgreePrivacy = !isAgreePrivacy">
          <radio class="radio" color="#28bb9c" :checked="isAgreePrivacy" />
          <text>我已阅读并同意</text>
        </label>
        <navigator class="link" hover-class="none" url="./protocal">《服务条款》</navigator>
        和
        <text class="link" @tap="onOpenPrivacyContract">《隐私协议》</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/1xiMLejaoMS1.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/1AYzj8y4OIXN.woff") format("woff");
  font-display: swap;
}
page {
  height: 100%;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
  .desc{
	  margin-top:-50rpx ;
	  margin-bottom: 50rpx;
	  text-align: center;
	  font-size: 26rpx;
	  color:#999;
	  font-family: '阿里妈妈刀隶体 Regular';
	  
  }
}

.logo {
  flex: 1;
  text-align: center;
  image {
    width: 400rpx;
    height: 400rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;

  .input {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    border: 1px solid #ddd;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 30rpx;
    color: #fff;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #28bb9c;
  }

  .wechat {
    background-color: #06c05f;
  }

 
}


.button-privacy-wrap {
  position: relative;
  .button-opacity {
    opacity: 0;
    position: absolute;
    z-index: 1;
  }
}

.tips {
  position: absolute;
  bottom: 80rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;

  .radio {
    transform: scale(0.6);
    margin-right: -4rpx;
    margin-top: -4rpx;
    vertical-align: middle;
  }

  .link {
    display: inline;
    color: #28bb9c;
  }
}
.extra{
	margin-top: 40rpx;
	.other{
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		.detail{
			color: black;
		}
		
	}
}
</style>
